<template>
  <div class="mains">
    <div class="bottom">
      <div class="box-item-1">
        <p class="title">我的权益</p>
        <div class="box-bottom">
          <div class="items">
            <p class="item-title">已上传文档</p>
            <div class="btn">150</div>
          </div>
          <div class="items">
            <p class="item-title">累计收益</p>
            <div class="btn">70</div>
          </div>
          <div class="items">
            <p class="item-title">平台奖励</p>
            <div class="btn">70</div>
          </div>
          <div class="items">
            <p class="item-title">待审核</p>
            <div class="btn">150</div>
          </div>
          <div class="items">
            <p class="item-title">审核通过</p>
            <div class="btn">60</div>
          </div>

        </div>
        <div class="box-vip">
          <span><i class="iconfont icon-vip6"></i> 上传文档获取收益</span>
          <b>立即上传 <i class="el-icon-s-promotion"/></b>
        </div>
      </div>

    </div>
    <div class="center">
      <div  class="record">
        <div class="title">
          上传记录
        </div>
        <el-table :data="tableData" stripe max-height="600px" style="width: 100%">
          <el-table-column prop="name" label="文档名称" min-width="220" show-overflow-tooltip>
            <template slot-scope="{row}">
              <a class="href" href="javascript:void (0)">{{row.name}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="文档类型" show-overflow-tooltip>
            <template slot-scope="{row}">
              {{status(row.status)}}
            </template>
          </el-table-column>
          <el-table-column prop="money" label="文档价格" show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="date" label="上传时间"  show-overflow-tooltip min-width="150"></el-table-column>
          <el-table-column prop="status" label="审核状态"  show-overflow-tooltip min-width="150">
            <template slot-scope="{row}">
              {{status(row.status)}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center"  width="220">
            <template slot-scope="{row}">
              <el-button size="mini" type="success" icon="el-icon-check">上架</el-button>
              <el-button size="mini" type="danger" icon="el-icon-close">下架</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="bottom-box">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="1000">
          </el-pagination>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData: [
        {
          orderID: 'YSD7015012580000',
          name: '商务标书范本（3）',
          header: '安徽标书标权有限责任公司',
          money: '650',
          status:2,
          date: '2024-9-12 15:00:08',
        },
        {
          orderID: 'YSD7015012580000',
          name: '商务标书范本（3）',
          header: '安徽标书标权有限责任公司',
          money: '650',
          status:1,
          date: '2024-9-12 15:00:08',
        },
        {
          orderID: 'YSD7015012580000',
          name: '商务标书范本（3）',
          header: '安徽标书标权有限责任公司',
          money: '650',
          status:3,
          date: '2024-9-12 15:00:08',
        },


      ]
    }
  },
  methods:{
    status(item){
      switch (item){
        case 1:{
          return '免费文档'
        }
        case 2:{
          return 'VIP文档'
        }
        case 3:{
          return '其他文档'
        }

      }
    },
  }
}
</script>

<style scoped lang="scss">
.mains{
  width: 100%;

  display: flex;
  //justify-content: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding:0 3%;
  .center{
    width: 100%;
    min-height: 300px;
    //background: #ee0a24;
    //border: 1px dashed #d6c4c4;
    border-radius: 10px;
    .record{
      width: 100%;
      min-height: 100px;
      .title{
        width: 100%;
        font-size: 16px;
        font-family: 'OPPOB', sans-serif;
        height: 60px;
        display: flex;
        align-items: center;
        a{
          font-size: 26px;
          font-weight: 800;
          margin-right: 10px;
        }
      }
      .bottom-box{
        width: 100%;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: right;
      }
    }
  }
  .bottom{
    width: 100%;
    min-height: 100px;
    height: 180px;
    //background: url("@/assets/images/user-bgk.webp") no-repeat;
    background-size: contain;
    //margin-top: 20px;
    display: flex;
    .box-item{
      width:100%;
      height: 120px;
      //background: #fff;
      border-radius: 20px;
      //box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      margin-left: 10px;
      background-image: linear-gradient(to left, #fff 0%, #fee140 100%);
      padding: 3%;
      box-sizing: border-box;
      position: relative;
      .title{
        font-size: 16px;
        font-family: 'OPPOR', sans-serif;
        color: #333;
      }
      .money{
        width: 100%;
        font-size: 30px;
        font-family: 'OPPOB', sans-serif;
        color: #333;
        margin-top: 10px;
        i{
          font-size: 22px;
        }
      }
      .bottom{
        width: 100%;
        height: 50px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        left: 0;
        a{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          font-size: 14px;
          width: 100%;
          background: rgba(242,133,8,0.2);
          color: #fff;
          border-radius: 0 0 20px 20px;
        }
      }
    }
    .box-item-1{
      width: 100%;
      height: 160px;
      background-image: linear-gradient(to left, #fff 0%, #fee140 100%);
      //margin-left: 10px;
      border-radius: 20px;
      //box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      padding: 3%;
      box-sizing: border-box;
      position: relative;
      .title{
        font-size: 16px;
        font-family: 'OPPOR', sans-serif;
        color: #333;

      }
      .box-bottom{
        width: 100%;
        height: 55px;

        font-family: 'OPPOL', sans-serif;
        //border-top: 1px solid #fda279;
        padding: 10px 0 0 0;
        display: flex;
        justify-content: space-between;
        .items{
          height: 60px;
          text-align: center;
          .item-title{
            font-size: 14px;
            color: #333;
          }
          .btn{
            font-size: 18px;
            margin-top: 15px;
            color: #333;
            font-family: 'OPPOB', sans-serif;
          }
        }
      }
      .box-vip{
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 0;
        left: 0;
        border-radius: 0 0 20px 20px;
        background: rgba(242,133,8,0.2);
        color: #333;
        display: flex;
        align-items: center;
        padding: 0 3%;
        box-sizing: border-box;
        justify-content: space-between;
        span{
          display: flex;
          align-items: center;
          font-size: 14px;
          i{
            font-size: 24px;
          }
        }
        b{
          font-size: 14px;
        }
      }
    }
  }
}

</style>